<template>
  <div id="personal">
    <div class="photoX">
      <img :src="headPortrait" alt="" @click="portrait">
      <input type="file" class="img_input" accept="image/png,image/gif,image/jpeg" ref="portrait" @change="selectImg">
      <p v-text="info.name"></p>
    </div>
    <ul class="content">
        <li>
            <div class="div">
                <label>账号 :</label>
                <span v-if="headType == 1" v-text="headPhone"></span>
                <span v-if="headType == 2" v-text="headEmail"></span>
            </div>
        </li>
        <li>
            <div class="div">
                <label>昵称 :</label>
                <div class="noE finish" v-show="xgShow">
                    <span v-text="headName"></span>
                    <img class="po_ri" :src="img" @click="set()" alt=""/>
                </div>
                <div class="noE setX" style="display: none" v-show="wcShow">
                    <input class="Iname" type="text" v-model="name"/>
                    <input class="Ibtn po_ri" type="button" value="完成" @click="finished()"/>
                </div>
            </div>

        </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'personal',
  data () {
    return {
      img: require('../../assets/images/edit.png'),
      info: [],
      name: '',
      file: '',
      xgShow: true,
      wcShow: false,
      userImg: ''
    };
  },
  mounted () {
  },
  methods: {
    portrait () {
      this.$refs.portrait.click();
    },
    selectImg: function (e) {
      function getCookie (cname) {
        let name = cname + '=';
        let ca = document.cookie.split(';');
        for (let i = 0; i < ca.length; i++) {
          let c = ca[i];
          while (c.charAt(0) === ' ') c = c.substring(1);
          if (c.indexOf(name) !== -1) return c.substring(name.length, c.length);
        }
        return '';
      }
      let file = e.target.files[0]; // 获取图片的所有属性
      let param = new FormData(); // 创建一个表单
      param.append('avatar', file, file.name);
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          'X-XSRF-TOKEN': getCookie('XSRF-TOKEN')
        }
      };
      this.$axios.post('/api/user/modify-avatar', param, config)
        .then(({data}) => {
          if (data.code === 200) {
            this.$bus.$emit('upDate');
          } else {
            this.$message({
              message: data.msg,
              type: 'warning'
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    set () {
      this.xgShow = false;
      this.wcShow = true;
    },
    finished () {
      if (!this.name) {
        this.$message({
          message: '请输入要修改的昵称信息',
          type: 'warning'
        });
      } else if (this.name.length > 15) {
        this.$message({
          message: '昵称长度不符',
          type: 'warning'
        });
      } else {
        this.axios.post('user/modify-nickname', {
          nickname: this.name
        })
          .then(({data}) => {
            if (data.code === 200) {
              this.xgShow = true;
              this.wcShow = false;
              this.$bus.$emit('upDate');
            } else {
              this.$message({
                message: data.msg,
                type: 'warning'
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    }
  },
  computed: {
    ...mapState(['headPortrait', 'headName', 'headPhone', 'headEmail', 'headType'])
  }
};
</script>

<style lang="scss">
#personal {
   .photoX{
    background-color: #eef3f7;
    padding: 30px 0;
    text-align: center;
    position: relative;
}
 .photoX img{
    width: 100px;
    height: 100px;
    border-radius: 100%;
    cursor: pointer;

}
.img_input{
  position: absolute;
  left: -2000px;
  top: -100px;
}
 .photoX p{
    color: #7e8081;
    margin-top: 10px;
}
  .content {
    margin-top: 20px;
    font-size: 16px;
  }
  .content li {
    padding: 20px 0;
    border-bottom: 1px solid #dfdfdf;
  }
  .content li .div {
    width: 50%;
    margin: 0 auto;
    position: relative;
  }
  .content li div label {
    color: #8e8e8e;
    margin-right: 10px;
  }
  .content li div .noE {
    display: inline-block;
  }
  .content li div .noE .po_ri {
    position: absolute;
    right: 0;
    top: 3px;
    cursor: pointer;
  }
  .content li div .noE .Iname {
    border: 1px solid #dfdfdf;
    padding: 5px 10px;
  }
  .content li div .noE .Ibtn {
    background-color: #10a57d;
    padding: 3px 10px;
    color: #fff;
    vertical-align: middle;
  }
}
</style>
